<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import { getProductDetails, orderCalculation, orderCreation } from '@/app/api/home';

const imgUrl = import.meta.env.VITE_IMG_DOMAIN;

const details = ref({});
const id = ref()

const getDetails = async () => {
  const res = await getProductDetails({ goods_id: id.value });
  console.log(res);
  details.value = res.data;
  uni.setNavigationBarTitle({
    title: details.value.goods.goods_name
  });
};

const buy = async () => {
  // 第一步：计算
  const res = await orderCalculation({
    sku_data: [ {
      sku_id: details.value.sku_id,
      num: 1
    } ]
  });
  if (!res) {
    return uni.showToast({
      title: '购买失败'
    });
  }
  console.log(res);


  const res2 = await orderCreation({
    order_key: res.data.order_key,
    member_remark: ''
  });

  if (!res2) {
    return uni.showToast({
      title: '购买失败'
    });
  }
  uni.navigateTo({
    url: '../../../addon/mine/orderList/orderList?barName=服务订单&is_shop=1',
  });
};

onLoad(async (o) => {
  id.value = o.id
  uni.showLoading()
  await getDetails();+ 
  uni.hideLoading()
});
</script>

<template>
  <div class="commodity">
    <img :src="imgUrl + 'addon/system/backage_3.png'" class="commodity-cover" alt=""/>
    <image mode="aspectFill" :src="details.goods.goods_cover" class="commodity-cover" alt=""/>
    <div class="commodity-card">
      <p class="commodity-card-title">{{ details.goods.goods_name }}</p>
      <p class="commodity-card-description" v-html="details.goods.goods_desc"></p>
    </div>
    <div class="commodity-footer">
      <div class="commodity-footer-price">
        <div class="commodity-footer-price-iconContainer">
          <img class="commodity-footer-price-iconContainer-img" src="./commodity.png" alt=""/>
        </div>
        ￥{{ details.price }}
      </div>
      <up-button @click="buy" style="display: inline-flex" shape="circle" color="#4B81FB"
                 text="立即购买"></up-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

.commodity {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #F5F8F7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &-cover {
    width: 100%;
    height: 30vh;
    object-fit: contain;
  }

  &-card {
    width: 90%;
    height: 60vh;
    background: white;
    border-radius: 10px;
    margin: -10vh auto 0 auto;
    position: relative;
    z-index: 1;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;

    &-title {
      font-size: 20px;
      margin-bottom: 10px;
      font-weight: bold;
    }

    &-description {
      font-size: 16px;
      line-height: 30px;
      text-align: justify;
    }
  }

  &-footer {
    background: white;
    height: 10vh;
    display: flex;
    padding: 20px 30px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    &-price {
      display: flex;
      align-items: center;
      font-size: 20px;
      gap: 10px;

      &-iconContainer {
        width: 35px;
        height: 35px;
        border: 1px solid #86A8FF;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(75, 129, 251, 0.1);
        border-radius: 100%;

        &-img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>